// 头部组件
import React from "react";
import Logo from "../logo.svg"
import {NavLink,useNavigate} from "react-router-dom"
import styled from "styled-components"
import { Button } from 'antd';
import {observer} from "mobx-react"
import {useStore} from "../stores/index"


const StyleHeader = styled.header`
  background:#02101f;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 10px 100px;
  color:#fff
`
const StyledLeft = styled.div`
  display: flex;
  align-items: center;
`
const LogoEle = styled.img`
  height:30px
`
const StyledLink = styled(NavLink)`
  color:#fff;
  margin-left: 30px;
  &.active{
    border-bottom: 1px solid #fff;
  }
`
const Login = styled.div``
const ButtonEl = styled(Button)`
  margin-left: 10px;
`


const Component = observer(()=>{
  const navigate = useNavigate()
  const {UserStore,AuthStore} = useStore()
  // 注销
  const handleLogout = ()=>{
    AuthStore.logout();
    navigate("/login")
  }
  // 登录
  const handleLogin = ()=>{
    navigate("/login")
  }
  // 注册
  const handleRegister = ()=>{
    navigate("/register")
  }

  return (
    <StyleHeader>
      <StyledLeft>
        <LogoEle src={Logo} alt="" />
        <nav>
          <StyledLink to="/" activeclassname="active">首页</StyledLink>
          <StyledLink to="/history" activeclassname="active">历史</StyledLink>
        </nav>
      </StyledLeft>
      <Login>
        {
          UserStore.currentUser?<>
            <span>{UserStore.currentUser.attributes.username}</span>
            <ButtonEl type="primary" onClick={handleLogout}>注销</ButtonEl>
          </>:<>
            <ButtonEl type="primary" onClick={handleLogin}>登录</ButtonEl>
            <ButtonEl type="primary" onClick={handleRegister}>注册</ButtonEl>
          </>
        }
      </Login>
    </StyleHeader>
  );
})
export default Component;
